import { Outlet, NavLink } from "react-router-dom";

export default function Root() {

  const router = [
    {
      name: 'Home',
      path: '/'
    },
    {
      name: 'Form',
      path: '/form'
    },
    {
      name: 'Foo',
      path: '/foo'
    },
  ]

  return (
    <>
      <div id="sidebar">
        <h1>React Router Contacts</h1>
        <div>
          <form id="search-form" role="search">
            <input
              id="q"
              aria-label="Search contacts"
              placeholder="Search"
              type="search"
              name="q"
            />
            <div
              id="search-spinner"
              aria-hidden
              hidden={true}
            />
            <div
              className="sr-only"
              aria-live="polite"
            ></div>
          </form>
          <form method="post">
            <button type="submit">New</button>
          </form>
        </div>
        <nav>
          <ul>
            {
              router.map(it => (
                <li key={it.name}>
                  <NavLink to={it.path}
                    className={({ isActive, isPending }) =>
                      isActive
                        ? "active"
                        : isPending
                          ? "pending"
                          : ""
                    }
                  >{it.name}</NavLink>
                </li>
              ))
            }
          </ul>
        </nav>
      </div>
      <div id="detail">
        <Outlet />
      </div>
    </>
  );
}